.artificial-intelligence {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .ai-left,
  .ai-right {
    width: 810px;
    height: 100%;

    .doudou-card {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 31px;
      height: 30%;
    }

    .chart-shuzihua{
      .dynamic-data-item {
        width: 230px;
        height: 342px;
        // background: linear-gradient(to bottom, #2190f78a, #2190f700);
        // ;
        display: flex;
        flex-direction: column;
        justify-items: center;
        justify-content: center;
        font-size: 40px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        border-radius: 10px;
        .ddi-title{
          font-size: 28px;
          transform: translateY(23px);
        }
        .ddi-value{
          display: flex;
          font-size: 45px;
          display: inline-block;
          font-family: neirong;
          .ddi-unit{
            font-size: 25px;
            color: #3FD0FF;
            transform: translateY(22px);
          }
        }
      }

    }

    
  }

  .ai-left{
    .kehuguanxi {
      height: 33%;
      display: flex;
      padding: 20px 0;
      .ea-img{
        position: relative;
        width: 45%;
        height: 85%;
        transform: translate(64px, 29px);
        img{
          position: absolute;
          &.ea-img1 {
            width: 126px;
            left: 22%;
            top: -30px;
          }
          &.ea-img2 {
            width: 41px;
            top: 95px;
            left: 13%;
          }
          &.ea-img3 {
            width: 41px;
            top: 95px;
            left: 55%;
          }
          &.ea-img4 {
            width: 41px;
            top: 70%;
            left: 36%;
          }
          &.ea-img5 {
            width: 108px;
            top: 56%;
            left: 55%;
          }
          &.ea-img6 {
            width: 108px;
            top: 57%;
            left: -5%;
          }
        }
      }
      .ea-value{
        position: relative;
        width: 65%;
        height: 100%;
        transform: translate(134px, -24px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: neirong;
        .eav-item{
          display: flex;
          flex-direction: row;
          color: #fff;
          background-image: url('@/assets/achievement-aggregation/line.png');
          background-size: 300px 3px;
          background-repeat: no-repeat;
          position: relative;
          align-items: center;
          background-position: -26px 48px;
          &::before{
            content: '';
            position: absolute;
            top: 10px;
            left: -36px;
            width: 30px;
            height: 30px;
            background-image: url('@/assets/artificial-intelligence/arr.png');
            background-size: contain;
            background-repeat: no-repeat;
          }
          .eavi-title{
            font-size: 28px;
            display: inline-block;
            width: 160px;
          }
          .eavi-value{
            font-size: 32px;
            display: inline-block;
            height: 51px;
            line-height: 49px;
            width: 100px;
          }
          &:not(:first-child) {
            margin-top: 34px;
          }
          &:nth-child(1) {
            .eavi-value{
              background-image: linear-gradient(to right, #1D80E0, #fff); /* 渐变背景图片 */
              -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
              color: transparent; /* 设置文字颜色为透明 */
            }
          }
          &:nth-child(2) {
            .eavi-value{
              background-image: linear-gradient(to right, #71F7AA, #fff); /* 渐变背景图片 */
              -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
              color: transparent; /* 设置文字颜色为透明 */
            }
          }
          &:nth-child(3) {
            .eavi-value{
              background-image: linear-gradient(to right, #D0FC66, #fff); /* 渐变背景图片 */
              -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
              color: transparent; /* 设置文字颜色为透明 */
            }
          }
        }
      }
    }
    .qdcloud-title{
      width: 437px;
      height: 52px;
      font-size: 26px;
      background-image: url('@/assets/achievement-aggregation/icon-bj-4.png');
      background-size: 100% 82%;
      background-repeat: no-repeat;
      text-align: center;
      transform: translateX(30%);
    }
    .yjxxtj-container{
      position: relative;
      height: 30%;
      .aiyc-bgi{
        width: 280px;
        position: absolute;
        top: 3px;
        left: 20px;
      }
      .chart-yjxxtj-legend{
        top: 10px;
        left: 430px;
        z-index: 1;
        position: absolute;
        display: inline-block;
        overflow: hidden;
        overflow-y: auto;
        height: 80%;
        padding-right: 5px;
        .cfl-item{
          color: #fff;
          font-size: 28px;
          height: 50px;
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          span{
            display: inline-block;
          }
          .cfli-dot{
            width: 16px;
            height: 16px;
            margin-right: 20px;
          }
          .cfli-name{
            width: 136px;
          }
          .cfli-value{
            text-align: start;
            display: inline-block;
            width: 84px;
          }
        }
      }
    }
  }

  .ai-right {
    .air-kjcx{
      height: 100%;
      .airk-left{
        font-size: 28px;
        font-family: biaoti;
        position: relative;
        .airkl-item{
          position: absolute;
          background-repeat: no-repeat;
          top: 214px;
          background-size: 87px 87px, 60px 60px;
          background-position: 0 0, 14px 4px;
          text-align: center;
          line-height: 87px;
          width: 87px;
          height: 87px;
          &::before{
            content: '';
            display: inline-block;
            width: 2px;
            transform-origin: 61px 100px;
            background-color: #0084FF;
            position: absolute;
            top: -121%;
            left: 50%;
          }
          span{
            display: inline-block;
            transform: translate(4px, 82px);
          }
          &:nth-child(1){
            width: 115px;
            height: 113px;
            top: 10px;
            left: 130px;
            text-align: center;
            line-height: 113px;
            background-image: url('@/assets/artificial-intelligence/qinggong.png');
            background-size: 115px 113px;
            &::before{
              display: none;
            }
          }
          &:nth-child(2){
            left: 20px;
            background-image: url('@/assets/artificial-intelligence/icon-bj.png'),url('@/assets/artificial-intelligence/qinhua.png');
            &::before{
              transform: rotate(40deg);
              height: 123px;
            }
          }
          &:nth-child(3){
            left: 150px;
            background-image: url('@/assets/artificial-intelligence/icon-bj.png'),url('@/assets/artificial-intelligence/xidian.png');
            &::before{
              transform: rotate(0deg);
              height: 97px;
            }
          }
          &:nth-child(4){
            left: 275px;
            background-image: url('@/assets/artificial-intelligence/icon-bj.png'),url('@/assets/artificial-intelligence/nanrui.png');
            &::before{
              transform: rotate(-40deg);
              height: 123px;
              top: -209%;
              transform-origin: 38px 148px;
            }
          }
        }
      }
    }
    .szhnlkapt-title{
      width: 437px;
      height: 52px;
      font-size: 26px;
      background-image: url('@/assets/achievement-aggregation/icon-bj-4.png');
      background-size: 100% 82%;
      background-repeat: no-repeat;
      text-align: center;
      transform: translateX(30%);
    }
    .huodong-number{
      width: 230px;
        height: 342px;
        // background: linear-gradient(to bottom, #2190f78a, #2190f700);
        // ;
        display: flex;
        flex-direction: column;
        justify-items: center;
        justify-content: center;
        font-size: 40px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        border-radius: 10px;
        .ddi-imgs{
          position: relative;
          width: 100px;
          height: 100px;
          transform: translate(58px, -56px);
          img{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 80%;
            transform: translate(-66%, -43%);
          }
        }
        .ddi-title{
          font-size: 28px;
        }
        .ddi-value{
          display: flex;
          font-size: 45px;
          display: inline-block;
          font-family: neirong;
          transform: translateY(23px);
          .ddi-unit{
            font-size: 25px;
            color: #3FD0FF;
            transform: translateY(22px);
          }
        }
    }
    .chart-fhsjcpsl-gb{
      top: 174px;
      left: 116px;
      z-index: 0;
      width: 290px;
      height: 290px;
      background-color: #486cc724;
      border-radius: 50%;
      border: 2px solid #486cc77a;
      position: absolute;
    }
    .chart-fhsjcpsl{
      transform: scaleY(0.95);
    }
    .chart-fhsjcpsl-fugai{
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      position: absolute;
      background-image: url('@/assets/achievement-aggregation/circle-1.png');
      background-size: 65px 70px;
      background-repeat: no-repeat;
      background-position: 243px 290px;
    }
    .chart-fhsjcpsl-legend{
      width: 100%;
      height: 100%;
      top: 194px;
      left: 500px;
      z-index: 1;
      position: absolute;
      .cfl-item{
        color: #fff;
        font-size: 28px;
        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        span{
          display: inline-block;
        }
        .cfli-dot{
          width: 16px;
          height: 16px;
          margin-right: 20px;
        }
        .cfli-name{
          width: 1500px;
        }
        .cfli-value{
          text-align: start;
        }
      }
    }
  }
  .shudianzhinenghua {
    width: 1750px;
    height: 514px;
    position: absolute;
    left: 1053px;
    bottom: 102px;
    .nc-card-title{
      background-size: 48px 43px, 100% 65px;
      background-repeat: no-repeat;
      background-position: 28px 12px, 28px 19px;
      .nc-ct-span{
        transform: translate(82px, 3px);
      }
    }
    .doudou-row-shudianzhinenghua{
      margin-left: 23px;
      height: 100%;
      .el-carousel__button{
        width: 26px;
        height: 26px;
        border-radius: 15px;
        transform: translateY(-46px);
      }
    }
    .ea-value{
      position: relative;
      width: 65%;
      height: 100%;
      transform: translate(134px, 11px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: neirong;
      .eav-item{
        display: flex;
        flex-direction: row;
        color: #fff;
        background-image: url('@/assets/achievement-aggregation/line.png');
        background-size: 300px 3px;
        background-repeat: no-repeat;
        position: relative;
        align-items: center;
        background-position: -26px 48px;
        &::before{
          content: '';
          position: absolute;
          top: -5px;
          left: -40px;
          width: 40px;
          height: 40px;
          background-image: url('@/assets/village-level/qingyang/arr.png');
          background-size: cover;
        }
        .eavi-title{
          font-size: 28px;
          display: inline-block;
          width: 217px;
        }
        .eavi-value{
          font-size: 32px;
          display: inline-block;
          height: 51px;
          line-height: 49px;
        }
        &:not(:first-child) {
          margin-top: 34px;
        }
        // &:nth-child(1) {
        //   .eavi-value{
        //     background-color: #02fe97;
        //     background-image: linear-gradient(to right, #1D80E0, #fff); /* 渐变背景图片 */
        //     -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
        //     color: transparent; /* 设置文字颜色为透明 */
        //   }
        // }
        // &:nth-child(2) {
        //   .eavi-value{
        //     background-image: linear-gradient(to right, #71F7AA, #fff); /* 渐变背景图片 */
        //     -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
        //     color: transparent; /* 设置文字颜色为透明 */
        //   }
        // }
        // &:nth-child(3) {
        //   .eavi-value{
        //     background-image: linear-gradient(to right, #D0FC66, #fff); /* 渐变背景图片 */
        //     -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
        //     color: transparent; /* 设置文字颜色为透明 */
        //   }
        // }
      }
    }
  }
  .shudianzhinenghua {
    width: 1750px;
    height: 514px;
    position: absolute;
    left: 1053px;
    bottom: 102px;
    .doudou-row-shudianzhinenghua{
      margin-left: 23px;
      height: 100%;
    }
    .ea-value{
      position: relative;
      width: 91%;
      height: 40%;
      transform: translateX(26px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: neirong;
      .eav-item{
        display: flex;
        flex-direction: row;
        color: #fff;
        background-image: url('@/assets/achievement-aggregation/line.png');
        background-size: 300px 3px;
        background-repeat: no-repeat;
        position: relative;
        align-items: center;
        background-position: -26px 48px;
        &::before{
          content: '';
          position: absolute;
          top: -5px;
          left: -40px;
          width: 40px;
          height: 40px;
          background-image: url('@/assets/village-level/qingyang/arr.png');
          background-size: cover;
        }
        .eavi-title{
          font-size: 28px;
          display: inline-block;
          width: 217px;
        }
        .eavi-value{
          font-size: 32px;
          display: inline-block;
          height: 51px;
          line-height: 49px;
          margin-right: 10px;
        }
        &:not(:first-child) {
          margin-top: 34px;
        }
        &:nth-child(1) {
          .eavi-value{
            background-image: linear-gradient(to right, #1D80E0, #fff); /* 渐变背景图片 */
            -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
            color: transparent; /* 设置文字颜色为透明 */
          }
        }
        &:nth-child(2) {
          .eavi-value{
            background-image: linear-gradient(to right, #71F7AA, #fff); /* 渐变背景图片 */
            -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
            color: transparent; /* 设置文字颜色为透明 */
          }
        }
        &:nth-child(3) {
          .eavi-value{
            background-image: linear-gradient(to right, #D0FC66, #fff); /* 渐变背景图片 */
            -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
            color: transparent; /* 设置文字颜色为透明 */
          }
        }
      }
    }
  }
}

@keyframes rotate1 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  0% {
    transform: translateY(0);
  }
}
@keyframes rotate2 {
  0% {
    transform: translateX(12%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(12%) rotateX(75deg) rotateZ(360deg);
  }
}
@keyframes rotate3 {
  0% {
    transform: translateX(31%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(31%) rotateX(75deg) rotateZ(-360deg);
  }
}
@keyframes rotate4 {
  0% {
    transform: translateX(69%) rotateX(-75deg) rotateZ(0);
  }
  100% {
    transform: translateX(69%) rotateX(-75deg) rotateZ(360deg);
  }
}